<template>
<div>
  <div class="breadcrumb">
    <el-page-header @back="goBack" content="用户管理详情">
    </el-page-header>
  </div>
<div class="head">
  <el-input class="search"
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="input"
      style="width: 300px"
  >
  </el-input>
  <el-button :icon="Icon.Search" circle @click="search" />
  <el-button color="#626aef" @click="isEdit0=!isEdit0;isEdit1=!isEdit1" round plain>编辑信息</el-button>
  <el-button color="#626aef" @click="addForm" round plain>添加客户</el-button>
</div>
<!--  弹窗表单-->
<el-dialog v-model="isShowForm"  width="600px" draggable class="formclass">
  <el-form
      label-width="100px"
      :model="form"
      :rules="rule"
      ref="FORM"
  >
    <el-form-item label="客户姓名" prop="username">
      <el-input v-model="form.username"  />
    </el-form-item>
    <el-form-item label="联系方式" prop="tele">
      <el-input v-model="form.tele" />
    </el-form-item>
    <el-form-item label="常用地址" prop="loc">
      <el-input :readonly="true" v-model="form.loc" />
    </el-form-item>
    <el-row>
      <el-col :span="10">
        <el-form-item label="省" prop="province">
          <el-select v-model="form.province" @change="getProvinces" filterable placeholder="请选择省份" fit-input-width="true"
                     style="width: 120px" prop="province">
            <el-option
                v-for="item in locValue.provinces"
                :key="item.provinceId"
                :label="item.provinceName"
                :value="item.provinceName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="10">
        <el-form-item label="市" prop="city">
          <el-select v-model="form.city" @change="getCities" placeholder="请选择市"  style="width: 150px" prop="city">
            <el-option
                v-for="item in this.locValue.cities"
                :key="item.cityId"
                :label="item.cityName"
                :value="item.cityName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="区" prop="religion" >
          <el-select v-model="form.religion"  @change="getRegions" placeholder="请选择区"  style="width: 150px;" prop="religion">
            <el-option
                v-for="item in locValue.religions"
                :key="item.regionId"
                :label="item.regionName"
                :value="item.regionName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col >
    </el-row>
    <el-form-item label="详细地址" prop="other" >
      <el-input style="width: 250px;margin-top: 10px" @change="getOthers" placeholder="请输入具体地址" prop="other" v-model="form.other"></el-input>
    </el-form-item>



    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancelExpert('FORM')">取消</el-button>
    </el-form-item>
  </el-form>

</el-dialog>


<div class="table" style="text-align: center;">
  <el-table ref="singleTable" :data="tableData"     stripe    border
            style=" width:100%; height:560px"  :row-style="{height: '50px'}" >
    <el-table-column type="index" :index="getIndex" label="序号" width="50">
    </el-table-column>
    <el-table-column
        property="username" label="客户姓名" width="200">
    </el-table-column>
    <el-table-column property="tele" label="联系方式" width="200">
    </el-table-column>
    <el-table-column property="loc" label="常用地址">
    </el-table-column>
    <el-table-column  width="100px">
      <template v-slot="scope">
      <collapse-transition dimension="width" :duration="300" >
        <div v-show="isEdit0" >
          <el-button type="danger" style=" margin-right: 15px; " @click="deleteUser(scope.row.uid)" :icon="Icon.Delete" circle />
        </div>
        </collapse-transition>
      </template>

    </el-table-column>
    <el-table-column width="100px">
      <template v-slot="scope">
      <collapse-transition dimension="width" :duration="300" >
        <div v-show="isEdit1" >
            <el-button type="primary" style=" margin-right: 15px;"  @click="showForm(scope.row)" :icon="Icon.Edit" circle />
        </div>
      </collapse-transition>
        </template>
    </el-table-column>


  </el-table>
  <el-pagination
      background
      :page-size=pageSize
      :page-sizes="[10,20,30,40]"
      layout="total, prev, pager, next"
      :total=totalSize
      @current-change="pageChange"
      style="margin-top: 15px"
      :current-page=pageNow
      >
  </el-pagination>
</div>


</div>
</template>

<script>
import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
import  {request_user,request_operation}from '@/util/request'
import { Delete,Edit,Search } from '@element-plus/icons-vue';
export default {
  name: "UserManage",
  components: {
    CollapseTransition,
  },
  data(){

    return{
      Icon:{Delete,Edit,Search},
      tableData: [],
      pageSize:10,
      totalSize:100,
      pageNow:1,
      input:'',//搜索
      loading:false,
      isEdit0:false,
      isEdit1:false,
      isSearch:false,
      form:{
        uid:'',
        username:'',
        tele:'',
        province:'',
        city:'',
        religion:'',
        other:'',
        loc:'',
        regionID:''
      },
      isediting:false,


      locValue: {
        provinces:[],
        cities:[],
        religions:[]
      }


        ,
      isShowForm:false,
      isAdd:false,
      rule:{

        username:[{required:true,message:"必填",trigger: 'blur'}],
        tele:[{required:true,message:"必填",trigger: 'blur'}],
        province:[{required:true,message:"必填",trigger: 'blur'}],
        city:[{required:true,message:"必填",trigger: 'blur'}],
        religion:[{required:true,message:"必填",trigger: 'blur'}],
        other:[{required:true,message:"必填",trigger: 'blur'}],
        loc:[{required:true,message:"必填",trigger: 'blur'}],
      }
    }

  },

  methods:{
    //手动清空
    clear(){
      this.form={
        uid:'',
        username:'',
        tele:'',
        province:'',
        city:'',
        religion:'',
        other:'',
        loc:'',
      }
    },
    addForm(){
      this.isAdd=true
      this.showForm()
    },
    cancelExpert(){

     //   console.log(this.$refs.FORM.resetFields());
      this.clear()
      this.isShowForm = false; //关闭对话框
      this.isAdd=false
    },

    //删除客户
    deleteUser(id){
      console.log(id)
      this.$confirm('此操作将永久删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request_user.delete("user/"+id).then(res=>{
          if (res.data.code===200){
            this.getAllUsers()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //修改和添加使用的对话框显示
    showForm(row){
      this.isShowForm=true

      if(!this.isAdd){
        console.log(row.loc)
        //this.isediting=true
        this.form.username = row.username
        this.form.loc=row.loc
        this.form.province= row.loc.split("-")[0];
        this.form.city= row.loc.split("-")[1];
        this.form.religion= row.loc.split("-")[2];
        this.form.other= row.loc.split("-")[3];
        this.form.tele = row.tele
        this.form.uid=row.uid
        this.locValue.cities=this.locValue.provinces.filter((item)=>item.provinceName===this.form.province)[0].cityList
        this.locValue.religions=this.locValue.cities.filter((item)=>item.cityName===this.form.city)[0].regionList
      }


    },
    //添加或者修改的提交
    onSubmit(){
      this.$refs.FORM.validate((valid)=>{
        if (valid){
          console.log("111111111111111")
          let user = {
            username:this.form.username,
            uid:this.form.uid,
            loc:this.form.loc,
            tele:this.form.tele,
            regionId:this.form.regionID
          }
          if(this.isAdd){
            request_user.post("user/add",user).then(res=>{
              if(res.data.code==200){
                console.log(res.data)
                this.getAllUsers()
                this.isAdd=false
                this.isShowForm=false
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
              }else{
                this.$message({
                  message: '添加失败',
                  type: 'error'
                });
              }
            })
          }else {
            request_user.put("user/update",user).then(res=>{
              if(res.data.code==200){
                console.log(res.data);
                this.getAllUsers()
                this.isShowForm=false

                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
              }else {
                this.$message({
                  message: '修改失败',
                  type: 'error'
                });
              }
              this.clear()
            })
          }


        }else {
          this.$message.error('请完善表单相关信息！');
        }
      })
    },
    //根据名字搜索，支持分页
    search(){
      if(this.input!==''){
        this.isSearch=true
      }else{
        this.isSearch=false
      }//查出来数据分页
      request_user.post('user/',
          {
            username:this.input,
            pageNum:this.pageNow,
            pageSize:this.pageSize

          }).then(res=>{
        let data = res.data.data
        console.log(res.data)
        this.tableData=data.list
        this.totalSize=data.total

      })
    },
    //表格索引获取
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    //换页
    pageChange(val){
      this.pageNow=val
          if(this.isSearch){
            this.search()
          }else {
            this.getAllUsers()
          }
    },
    //所有用户
    getAllUsers(){
      request_user.post("user/all",{
        pageNum:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        console.log(res)
       let data = res.data.data
        this.tableData= data.list;
        this.totalSize=data.total
      })
    },
    getLocations(){
      request_operation.get("/province").then(res=>{
        console.log(res.data);
        this.locValue.provinces=res.data.data
      })
    },
    getProvinces(){
      this.form.city=''
      this.form.religion=''
      this.locValue.cities=this.locValue.provinces.filter((item)=>item.provinceName===this.form.province)[0].cityList
      this.form.loc=this.form.province
    },
    getCities(){
      this.form.religion=''
      this.locValue.religions=this.locValue.cities.filter((item)=>item.cityName===this.form.city)[0].regionList
      this.form.loc=this.form.province+'-'+this.form.city
    },
    getRegions(value){
      this.form.loc=this.form.province+'-'+this.form.city+'-'+this.form.religion
      this.form.regionID=this.locValue.religions.filter((item)=>item.regionName===value)[0].regionId
    },
    getOthers(){
      this.form.loc=this.form.province+'-'+this.form.city+'-'+this.form.religion+'-'+this.form.other
    }
  },
  beforeMount() {
   this.getAllUsers();
    this.getLocations()
  },
  watch:{
    // "form.province":{
    //   deep:true,
    //   handler(newItem,oldItem){
    //     console.log("new   "+newItem)
    //     console.log("old   "+oldItem)
    //     if(newItem!==''&&!this.isediting){
    //       this.form.city=''
    //       this.form.religion=''
    //       this.locValue.cities=this.locValue.provinces.filter((item)=>item.provinceName===newItem)[0].cityList
    //       this.form.loc=this.form.province
    //     }
    //   }
    // },

  }
}
</script>

<style>
body{
  margin: 0;
  padding: 0;
}
.breadcrumb{
  margin: 10px 0;

}
.head{
  margin: 10px 0;
  text-align: left;
}
.search{
  width: 100px;
  margin-right: 10px;
}
.formclass{
  border-radius: 20px;
}
.table{
margin-right: 40px;
}
</style>